<!-- 报警记录 -->
<template>
  <div class="alarms-record-data">
    <div class="header">
      <el-form
        class="-mb-15px"
        ref="queryFormRef"
        :inline="true"
      >
        <el-form-item label="报警时间">
          <el-date-picker
            v-model="dateScope"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="info" @click="reset">重置</el-button>
        <!-- <el-button type="primary" @click="exportExcel">导出</el-button> -->
      </div>
    </div>
    <div style="display: flex; justify-content: end; padding: 12px 0;">
          <el-switch
            v-model="status"
            class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            active-value="ALARMING"
            inactive-value="RELEASED"
            inactive-text="只读未解除的警报:"
            @change="getList"
          />
    </div>
    <div class="history-table">
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <el-table-column
          label="报警时间"
          align="center"
          prop="alarmingTime"
          width="180px"
        >
          <template #default="{row}">
            <span>{{ formatDate(row.alarmingTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报警解除时间" align="center" prop="releaseTime" width="180px">
          <template #default="{row}">
            <span v-if="row.releaseTime">{{ formatDate(row.releaseTime) }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="报警值" align="center" prop="level" width="80px" />
        <el-table-column label="报警详情" align="center" prop="detail">
          <template #default="{row}">
            <span style="color: #E54D42;">{{ row.detail }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      style="margin-top: 32px;"
      :total="page.total"
      v-model:page="page.pageNo"
      v-model:limit="page.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup lang="ts">
import { alarmsRecordPageByDevice } from '@/api/vs/vacuumdeviceattr/index'
import dayjs from 'dayjs';

const props = defineProps({
  deviceId: {
    type: Number,
    default: null
  }
})

// 分页数据
const page = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0,
})

// 是否解除警报
const status = ref('ALARMING')

// 选择事件范围
const dateScope = ref([])

// 表格加载中状态
const loading = ref(false)

// 日期格式化
const formatDate = (val) => {
  return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}

// 点击查询按钮触发
const search = () => {
  getList()
}

// 点击重置按钮触发
const reset = () => {
  dateScope.value = []
  getList()
}

// 点击导出按钮触发
// const exportExcel = () => {}

// 获取界面数据
const getList = () => {
  loadAlarmsRecordPageByDevice()
}

// 设备报警记录
const tableData = ref([])

// 加载报警记录分页数据
const loadAlarmsRecordPageByDevice = async () => {
  try {
    const params = {
      deviceId: props.deviceId,
      status: status.value,
      pageNum: page.value.pageNo,
      pageSize: page.value.pageSize
    }
    const res = await alarmsRecordPageByDevice(params)
    tableData.value = res.list
    page.value.total = res.total
  } catch (error) {
    console.log(error)
  }
}

onMounted(loadAlarmsRecordPageByDevice)
</script>

<style scoped lang="scss">
.alarms-record-data {
  padding: 12px;
  margin-top: 16px;
  background-color: #fff;
  border-radius: 8px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

:deep(.el-switch__label.is-active) {
  color: #303133;
}
</style>